<template>
  <el-container>
    <div class="block banner-upload"
         v-on:click="jumpAdd()">
      <i class="el-icon-plus"></i>
    </div>
    <div class="block"
         v-for="(item) in tableData"
         :key="item.id">
      <el-image :src="item.bg_url">
        <div slot="placeholder"
             class="image-slot">
          加载中<span class="dot">...</span>
        </div>
      </el-image>
      <div class="block-action">
        <div class="block-action-item"
             @click="edit(item.id)">编辑</div>
        <div class="block-action-item"
             @click="del(item.id)">删除</div>

      </div>
    </div>
  </el-container>
</template>

<script>
import { shareList, bannerType, delShareImage } from '@/api/modules/appConfig';
export default {
  name: "list",
  data () {
    return {
      form: {
        type: 0, //默认类型查询全部
        position: 0
      },
      tableData: [],
      total: 0,
      page: 1,
      pageSize: 10,
      position: [
        { id: 0, value: '全部' },
      ],
      type: [
        { id: 0, value: '全部' },
        { id: 1, value: '正常' },
        { id: 2, value: '已过期' }
      ],
      loading: false,
    };
  },
  methods: {
    changePage (currentValue) {
      var params = {
        position: this.form.position,
        type: this.form.type,
        page: currentValue,
        size: this.pageSize
      };

      this.loading = true;
      shareList(params).then(response => {
          console.log(response);
        let data = response.data;
        this.total = Number(data.total);
        this.page = Number(data.current);
        this.pageSize = Number(data.pageSize);
        this.tableData = data.list;
        this.loading = false;
      }).catch(err => {
        this.loading = false;
      })
    },
    reset (ref) {
      this.$refs[ref].resetFields();
    },
    search () {
      var params = {
        position: this.form.position,
        type: this.form.type
      };
      this.loading = true;
      shareList(params).then(response => {
        let data = response.data;
        this.total = Number(data.total);
        this.page = Number(data.current);
        this.pageSize = Number(data.pageSize);
        this.tableData = data.list;
        this.loading = false;
      }).catch(err => {
        this.loading = false;
      })
    },
    del (banner_id) {
      var params = {
        id: banner_id
      };
      this.$confirm('此操作将永久删除轮播图,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delBanner(params).then(response => {
          this.loading = true;
          //默认请求一次
          shareList({
            position: 'index',
            page: 1,
            pageSize: 20
          }).then(response => {
            let data = response.data;
            this.total = Number(data.pagination.total);
            this.page = Number(data.pagination.current);
            this.pageSize = Number(data.pagination.pageSize);
            this.tableData = data.list;
            this.loading = false;
          }).catch(err => {
            this.loading = false;
          })
        }).catch(res => {
          //捕获promise.reject
          // this.$message.info(res);
        })
      }).catch(() => {
        //捕获promise.reject
        this.$message.info('已取消');
      });

    },
    edit (shareId) {
      this.$router.push({ path: '/appConfig/shareimage/edit', query: { share_id: shareId } });
    },
    jumpAdd () {
      this.$router.push({ path: '/appConfig/shareimage/add', query: { position: 'index' } });
    }
  },
  mounted () {
    //获取轮播图类型
    // bannerType().then(response => {
    //   this.position = this.position.concat(response.data);
    // });
    // this.loading = true;
    //默认请求一次
    shareList({
      position: 'index',
      page: 1,
      pageSize: 20
    }).then(response => {
      let data = response.data;
      this.tableData = data;
      this.loading = false;
    }).catch(err => {
      this.loading = false;
    })
  }
}
</script>

<style scoped>
.el-container {
  width: 95%;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid #f2f6fc;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  margin: 10px auto;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.block {
  width: 375px;
  padding-bottom: 10px;
  margin: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.block-action {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.block-action-item {
  color: #ccc;
  padding: 5px 10px;
  font-size: 12px;
  width: 30%;
  text-align: center;
  cursor: pointer;
}
.banner-upload {
  display: flex;
  align-items: center;
  justify-content: center;
}
.banner-upload .el-icon-plus {
  font-size: 100px;
}
</style>